<template>
	<view>
		<view class="ceiling" :style="{ 'padding-top': statusBarHeight + 'px' }"></view>
		<searchHead goback='gobackF' title='股票搜索' searchTip='searchimg' background='#EE515A'></searchHead>
		<!--  tab-->
		<view class="cu-bar bg_FFFFFF search border-bottom-1B202C" style="background-color: #EE515A;">
			<view class="search-form radius">
				<text class="cuIcon-search"></text>
				<input v-model="where"@input="InputOn" @focus="InputFocus" style="background-color: #FFFFFF;color: #333333;" @blur="InputBlur" :adjust-position="false" type="text" placeholder-style="color:#999999" placeholder="请输入股票代码" confirm-type="search"></input>
			</view>
			<view class="action text-white" @click="searchShares()">
				<text class="cuIcon-close"></text>
				<text>搜索</text>
			</view>
		</view>

		<!-- 热搜榜 start -->
		<!-- 
		<view class="margin-top-sm bg_12161F">
			<view class="padding text-lg text-white">热搜榜</view>
			<view class="flex flex-wrap">
				<view class="hot-item flex-sub" v-for="item in 6">
					<view class="text-center text-lg color_F1F1F1">贵州茅台</view>
					<view class="text-center text-sm color_A6AFC3 margin-top-xs">600519.SH</view>
				</view>
			</view>
		</view> 
		-->
		<!-- 热搜榜 end -->
		
		<!-- 搜索结果 start-->
		<u-empty text="没有匹配的股票" mode="list" v-if="!data.length"></u-empty>
		<view class="bg_FFFFFF padding-lr" v-else>
			<view class="flex justify-between align-center padding-tb-sm border-bottom-1B202C">
				<view>
					<view class="text-lg text-black">股票/代码</view>
				</view>
				<view>
					<view class="text-lg text-black">价格</view>
				</view>
				<view>
					<view class="text-lg text-black">添加自选</view>
				</view>
			</view>
			<view class="flex justify-between align-center padding-tb-sm border-bottom-1B202C" v-for="(item, index) in data" :key="index">
				<view @click="toInfo(item)">
					<view class="text-lg text-black">{{item.N}}</view>
					<view class="color_525866 text-sm margin-top-xs">{{item.FS}}</view>
				</view>
				<view @click="toInfo(item)">
					<view class="text-lg text-black">{{item.P}}</view>
				</view>
				<view>
					<image @click="collection(item)" src="/static/images/icon/addgp.png" mode="widthFix" style="width: 50rpx;" ></image>
				</view>
			</view>
		</view>
		<!-- 搜索结果 end-->


		<!-- 新版本 end -->
	
		<view>
			<u-toast ref="uToast" />
		</view>

	</view>
</template>

<script>
	import searchHead from "@/component/searchHead/searchHead.vue"
	export default {
		components: {
			searchHead
		},
		data() {
			return {
				statusBarHeight: getApp().globalData.statusBarHeight, //状态栏高度
				where: '',
				data: [],
			};
		},
		methods: {
			InputOn(e) {
				this.$Request.post(this.$api.index.searchShares, {
					where: this.where
				}).then(res => {
					this.data = res.data;
				})
			},
			InputFocus(e) {
				console.log(e)
			},
			InputBlur(e) {
				console.log(e)
			},
			searchShares() {
				this.$Request.post(this.$api.index.searchShares, {
					where: this.where
				}).then(res => {
					this.data = res.data;
				})
			},
			toInfo(data) {
				uni.navigateTo({
					url: "/pages/gzQiYe/sharesInfo?name=" + data.N + "&code=" + data.FS,
				})
			},
			collection(item) {
				this.$Request.post(this.$api.index.collection, {
					sname: item.N,
					scode: item.FS,
				}).then(res => {
					this.$refs.uToast.show({
						title: res.msg,
					})
				})
			},
			checkLogin() {
				this.$Request.get(this.$api.index.checkLogin).then(res => {
					if (res.code == 1) {
						uni.navigateTo({
							url: "/pages/public/login/login",
						})
					}
				})
			}
		},
		onLoad(e) {
			this.where = e.where;
			this.searchShares();
			this.checkLogin();
		}
	}
</script>

<style lang="scss" scoped>
	@import "./search.scss";
	.pla{
		color: #000000;
	}
	.hot-item {
		padding: 15rpx 50rpx;
		border-right: 1px solid #202734;
		border-top: 1px solid #202734;

		&:nth-of-type(3n) {
			border-right: none;
		}
	}

	.cu-bar .search-form {
		background-color: #020204;
		color: #FFFFFF;
	}

	.all {
		background-color: #FFFFFF;
	}

	.button {
		width: 75px;
		height: 25px;
	}
	.cu-bar .search-form{
		background-color: #FFFFFF;
	}
	.border-bottom-1B202C {
	    border-color: #EDEDED;
	}
</style>
